<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px;
        }
    </style>
</head>

<body>
    <p>
        <button class="get">取值</button>
        <button class="set">赋值</button>
    </p>


    <!--    
        value="" 
        (1) value属性写在文本框内,表示表单加载时的初始值 
        (2) value属性写在单选框和复选项内,表示单选框和复选框被选中时的value值  
        (3) value="" value属性写在按钮内,表示按钮内的文本      
        
        disabled="disabled" 属性写在文本框内,表单加载时默认禁用
        required="required"  属性写在文本框内,表单加载时默认必填 
        checked="checked"  简写为 checked , 用在单选框和复选框, 表示表单加载时默认选中 
        selected="selected" 简写为 selected , 用在下拉框, 表示表单加载时默认选中对应的option选项 
    
    -->

    <form action="" method="get">
        <p>
            <label for="">用户名:</label>
            <!-- value="" value属性写在文本框内,表示表单加载时的初始值 -->
            <!-- disabled="disabled" 属性写在文本框内,表单加载时默认禁用  -->
            <input type="text" name="user" placeholder="请输入用户名" value="a123123" disabled="disabled">
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <!-- required="required"  属性写在文本框内,表单加载时默认必填  -->
            <input type="text" name="pwd" placeholder="请输入用户名" value="123123" required="required">
        </p>
        <p>
            <span>性别:</span>
            <!-- value="" value属性写在单选框和复选项内,表示单选框和复选框被选中时的value值 -->
            <!-- checked="checked"  简写为 checked , 用在单选框和复选框, 表示表单加载时默认选中 -->
            <label><input type="radio" name="sex" value="secret" checked="checked">保密</label>
            <label><input type="radio" name="sex" value="man" >男</label>
            <label><input type="radio" name="sex" value="woman">女</label>
        </p>
        <p>
            <span>记住用户:</span>
            <!-- value="" value属性写在单选框和复选项内,表示单选框和复选框被选中时的value值 -->
            <!-- checked="checked"  简写为 checked , 用在单选框和复选框, 表示表单加载时默认选中 -->
            <label><input type="checkbox" name="isRem" checked="checked">是否记住用户名</label>
        </p>
        <p><span>出生年份</span>
            <!-- selected="selected" 简写为 selected , 用在下拉框, 表示表单加载时默认选中对应的option选项 -->
            <select name="year" id="">
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003" selected="selected">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
                <option value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
                <option value="2023">2023</option>
            </select>
        </p>
        <p> 
            <!-- value="" value属性写在按钮内,表示按钮内的文本 -->
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
</body>
<script>

    /* 
        元素节点的属性 (元素节点的内置属性和方法 => 官方定义)
        (1) 元素节点也是一个对象类型的数据(引用类型),  有自己的属性和方法
        (2) 每个元素节点都是一个特殊的对象,官方给每个元素内置的属性和方法

        元素节点的属性(元素的内置属性)   => 通用
            Element.parentElement
            Element.children
            Element.previousElementSibling
            Element.nextElementSibling

            Element.innerHTML
            Element.innerText
            Element.textContent
            Element.outerHTML
            
            Element.id
            Element.className
            Element.classList  (add remove replace contains toggle(没有就新增, 有就删除) forEach)
            Element.title

            Element.dataset

            Element.style
            window.getComputedStyle(ele)  传入一个元素,返回该元素的css样式声明的对象(内部 外部 内联 默认)

        
        元素节点的属性(元素节点的内置属性)   => 某些元素独有的

            href  获取和设置元素href属性 (a link)
            target 获取和设置元素href属性 (a)
            src  获取和设置元素src属性(img script)
            alt  获取和设置元素alt属性(img)
            width/height 获取和设置元素的宽高(img table canvas)

            value 获取和设置元素的value值 
            name  获取和设置元素的name值
            type  获取和设置元素的type值
            placeholder  获取和设置元素的placeholder值

            状态相关
            checked 获取和设置元素(单选框和复选框)的选中状态  => 是否选中
            disabled 获取和设置元素(表单空间)的是否禁用  => 是否禁用(true:禁用 false:可用(默认))
            required 获取和设置元素(表单空间)的是否必填  => 是否必填(true:必填 false:选填(默认))

            下拉框
            vulue  获取和设置元素的value值 => 如果option中存在value属性,优先取value属性的属性值,如果没有value属性,取option标签对内的文本
            selectedIndex   获取和设置被选中的option的下标 
            selectedOptions  获取被选中的option(元素的集合) 



        


            



        元素节点的方法
            Element.setAttribute(key,value)
            Element.getAttribute(key)
            Element.removeAttribute(key)
    
    */

    var getBtn = document.getElementsByClassName("get")[0];
    var setBtn = document.getElementsByClassName("set")[0];
    var userInp = document.getElementsByName("user")[0];
    var pwdInp = document.getElementsByName("pwd")[0];
    var isRemInp = document.getElementsByName("isRem")[0];
    var yearSel = document.getElementsByName("year")[0];

    getBtn.onclick = function(){
        // console.log(userInp.name);
        // console.log(userInp.type);
        // console.log(userInp.placeholder);
        // console.log(userInp.value);

        // console.log(isRemInp.checked);  // 复选框是否选中
        // console.log(userInp.disabled);
        // console.log(pwdInp.required);

        console.log(yearSel.value);
        console.log(yearSel.selectedIndex); 
        console.log(yearSel.selectedOptions);
        console.log(yearSel.selectedOptions[0].value);
        console.log(yearSel.selectedOptions[0].innerText);
    }

    setBtn.onclick = function(){
        // userInp.name ="USER";
        // userInp.type = "password";
        userInp.placeholder = "爱输不输,不输拉倒";
        // userInp.value = "bbbbbbbbb";

        // pwdInp.type = pwdInp.type == "password" ? "text":"password";


        // isRemInp.checked = false;
        // userInp.disabled = false;
        // pwdInp.required = false;

        yearSel.value = "2023"
        yearSel.selectedIndex = 22;
    }
   


</script>

</html>